<template>
	<view class="conent">
		<view class="conent_box">
			<u-list v-if="honeyList.length>0" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in honeyList" :key="index">
					<u-row customStyle="margin-top: 40rpx;">
						<u-col span="5">
							<u--image :src="item.imageUrl" width="120" height="120" radius="20rpx"></u--image>
						</u-col>
						<u-col span="7">
							<u-row>
								<u-col span="3">
									<!-- <u--text :text="item.number+'号'" size="10" color="#000"
													customStyle="background:#FFEC45;padding: 0 10rpx;border-radius:10rpx;"></u--text> -->
									<u--text :text="item.hiveName" size="10" color="#000" lines="1"
										customStyle="background:#FFEC45;padding: 0 10rpx;border-radius:10rpx;"></u--text>
								</u-col>
								<u-col span="9">
									<u--text :text="item.apiaryName" size="18" bold lines="1" color="#000"></u--text>
								</u-col>
							</u-row>
							<!-- <u-line-progress :percentage="item.percentum" activeColor="#C4FFEF" height="20">
											<text
												style="color: #333;font-size: 14rpx;text-align: left;">已认购{{item.percentum}}%</text>
										</u-line-progress> -->
							<!-- <u--text :text="'已有'+item.peopleNumber+'人参与'" prefixIcon="account"
											iconStyle="font-size: 24px;color:#B0B0B0;margin-right:10rpx;" size="14"
											lineHeight="30" color="#B0B0B0"></u--text> -->
							<!-- <u--text :text="'认养周期：'+item.period+'月'" size="14" lineHeight="30"
											color="#333"></u--text> -->
							<u-text :text="'蜜蜂心情:'+beeStateList[item.beeState-1]" size="14px" color="#ff0000" bold
								lineHeight="60rpx"></u-text>
							<!-- <u-row>
											<u-col span="4">
												<u-text text="蜜蜂心情:" size="28rpx"
													color="#ff0000" bold lineHeight="60rpx"></u-text>
											</u-col>
											<u-col span="8">
												<u-text :text="beeStateList[item.beeState-1]" size="28rpx"
													color="#ff0000" bold lineHeight="60rpx"></u-text>
											</u-col>
										</u-row> -->
							<u-row v-if="checkedHoney==0"
								customStyle="border-radius:70rpx;height:70rpx;background:#C4FFEF;line-height:70rpx;padding:0 0 0 20rpx;">
								<u-col span="8">
									<u--text :text="'￥'+item.price+'/'+item.period+'月'" size="16" bold
										color="#000"></u--text>
								</u-col>
								<!-- <u-col span="2">
												<u--text :text="'/'+item.period+'月'" size="10" bold
													color="#333"></u--text>
											</u-col> -->
								<u-col span="4">
									<u-button text="认养" size="16" :hairline="false" shape="circle" color="#fff"
										customStyle="background:#07BFA5;border:none;font-weight:800;"
										@click="hiveFoster(item,checkedHoney)"></u-button>
								</u-col>
							</u-row>
							<u-row v-if="checkedHoney==1"
								customStyle="border-radius:70rpx;height:70rpx;background:#C4FFEF;line-height:70rpx;padding:0 0 0 20rpx;">
								<u-col span="6">
									<u--text :text="'￥'+item.price+'/'+item.period+'月'" size="16" lines="1" bold
										color="#000"></u--text>
								</u-col>
								<!-- <u-col span="2">
												<u--text :text="'/'+item.period+'月'" size="10" bold
													color="#333"></u--text>
											</u-col> -->
								<u-col span="6">
									<u-button text="查看详情" size="16" :hairline="false" shape="circle" color="#fff"
										customStyle="background:#07BFA5;border:none;font-weight:800;"
										@click="hiveFoster(item,checkedHoney)"></u-button>
								</u-col>
							</u-row>
						</u-col>
					</u-row>
				</u-list-item>
			</u-list>
			<view v-else class="honeyNull">
				<u--image src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/shopNull.png"
					customStyle="margin:auto;"></u--image>
				<u--text text="您还没有认养蜂箱" align="center" color="#8991A4"></u--text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		banner
	} from "@/api/pages/events.js"
	import {
		awaitList,
		myList,
		introduceTitle
	} from "@/api/pages/hive.js"
	import {
		trendsList,
		trendsTitle
	} from "@/api/pages/trend.js"
	import router from '@/api/router';
	const checkedHoney = ref("1") //0蜂箱认养；1我的蜂箱
	const honeyFrom = ref({
		pageNo: 1,
		pageSize: 10
	})
	const honeyList = ref([])
	const beeStateList = ref([
		'今天我去蜜蜂采蜜去喽',
		'今天有雨，我在家休息一下',
		'今天天气好热啊，主人你什么时候来看看我',
		'今天蜂蜜成熟了，主人记得过来摇蜜哦',
		'今天流蜜很丰富，请开视频看看我'
	])
	onMounted(() => {
		// getHive(honeyFrom.value);
		getMyList(honeyFrom.value);
	})
	const scrolltolower = () => {
		honeyFrom.value.pageNo++
		// getHive(honeyFrom.value);
		getMyList(honeyFrom.value);
		console.log(honeyFrom.value.pageNo);
	}
	const getHive = async (honeyFrom) => {
		const res = await awaitList(honeyFrom).then()
		honeyList.value = honeyList.value ? honeyList.value.concat(res.result.records) : res.result.records
		console.log("res---", res);
	}
	const getMyList = async (honeyFrom) => {
		const res = await myList(honeyFrom)
		honeyList.value = honeyList.value ? honeyList.value.concat(res.result.records) : res.result.records
		console.log("res---", res);
	}
	const hiveFoster = (item, checkedHoney) => {
		console.log(item, checkedHoney);
		router.navigateTo({
			url: '/pageA/hive/foster?hiveDate=' + JSON.stringify(item) + '&checkedHoney=' + checkedHoney
		})
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 0;
		padding: 0 20rpx;

		.honey {
			padding: 30rpx 20rpx 100rpx 20rpx;

			.honeyNav {
				display: flex;

				.item {
					margin-right: 20rpx;
					position: relative;
				}
			}

			.honeyNull {
				margin: 20rpx;
				padding: 20rpx;
				// border-radius: 40rpx;
				// box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
				background: #fff;
			}
		}
	}
</style>